<template>
  <div class="container">
    <div class="mainContent">
      <div class="inputArea">
        <div class="singleInput">
          <div class="account">{{ userAccount }}</div>
        </div>
        <div class="singleInput codeInput">
          <input type="text" maxlength="4" v-model="qrCode" placeholder="4位验证码" placeholder-style="color: #C7C7C7;" >
          <span :style="showyzm ? '' : 'color: #C7C7C7;'" @click="sendYzm">{{ yzmMsg }}</span>
        </div>
        <div class="singleInput">
          <input type="password" v-model="new_pwd" placeholder="输入新密码" placeholder-style="color: #C7C7C7;" >
        </div>
      </div>
      <div :class="['btn', isCanClick ? '' : 'notClick']" @click="changePwd">修改密码</div>
    </div>
  </div>
</template>

<script>
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  data () {
    return {
      userAccount: '',
      qrCode: '',
      new_pwd: '',
      showyzm: true,
      yzmMsg: '获取验证码',
      nNum: 60,
      timer: null,
      isCanClick: false
    }
  },
  onLoad () {
    const data = JSON.parse(wx.getStorageSync('teacherData'))
    this.userAccount = data.account
  },
  onUnload () {
    clearInterval(this.timer)
    this.new_pwd = ''
    this.qrCode = ''
    this.yzmMsg = '获取验证码'
    this.showyzm = true
    this.nNum = 60
  },
  watch: {
    qrCode (str) {
      if (str.length === 4 && this.new_pwd !== '') {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    },
    new_pwd (str) {
      if (str !== '' && this.qrCode.length === 4) {
        this.isCanClick = true
      } else {
        this.isCanClick = false
      }
    }
  },
  methods: {
    sendYzm () {
      if (this.showyzm) {
        this.senyam()
        this.$httpWX.post({
          url: '/shengxueApi/identity/sendTeacherMessageCode',
          data: {
            codeType: 3,
            mobile: this.userAccount
          },
          header: {
            'content-type': 'application/json', // 默认值
            'Api-Version': '2.0.1'
          }
        }).then(res => {
          if (res.code === '0') {
            wx.showToast({
              title: res.message,
              icon: 'success',
              duration: 2000
            })
          } else {
            wx.showToast({
              title: '账号不存在',
              icon: 'loading'
            })
            setTimeout(() => {
              this.showyzm = true
              this.yzmMsg = '获取验证码'
              this.nNum = 60
              clearInterval(this.timer)
            }, 1000)
          }
        })
      }
    },
    senyam () {
      this.showyzm = false
      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = '重新获取' + this.nNum
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          this.yzmMsg = '获取验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },
    changePwd () {
      if (this.isCanClick) {
        if (this.new_pwd.length < 6 || this.new_pwd.length > 16) {
          wx.showToast({
            title: '请输入6~16位新密码',
            icon: 'none'
          })
        } else {
          let encryptor = new JSEncrypt() // 新建JSEncrypt对象
          let publicKey =
            `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`
          encryptor.setPublicKey(publicKey) // 设置公钥
          let forgetTime = new Date().getTime()
          let rsaPassWord = encryptor.encrypt(forgetTime + this.new_pwd) // 对需要加密的数据进行加密
          this.$httpWX.post({
            url: '/shengxueApi/identity/teacherForgetPassword',
            data: {
              account: this.userAccount,
              credentials: this.qrCode,
              forgetTime: forgetTime,
              password: rsaPassWord
            },
            header: {
              'content-type': 'application/json', // 默认值
              'Api-Version': '2.0.1',
              'accessToken': wx.getStorageSync('tokens')
            }
          }).then(res => {
            if (res.code === '0') {
              clearInterval(this.timer)
              this.new_pwd = ''
              this.qrCode = ''
              this.yzmMsg = '获取验证码'
              this.showyzm = true
              this.nNum = 60
              wx.showToast({
                title: '修改成功',
                icon: 'success'
              })
              wx.reLaunch({ url: '../index/main' })
            } else {
              wx.showToast({
                title: res.message,
                icon: 'none'
              })
            }
          })
        }
      } else {
        wx.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    padding: 0 60rpx;
    .inputArea {
      .singleInput {
        border-bottom: 1rpx solid #E5E8ED;
        height: 112rpx;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;
        .account {
          color: #222;
          font-size: 30rpx;
          font-weight: bold;
        }
        input {
          color: #222;
          font-size: 30rpx;
          width: 100%;
        }
      }
      .codeInput {
        justify-content: space-between;
        span {
          display: inline-block;
          padding: 30rpx 27rpx;
          color: #FFAD0D;
          width: 280rpx;
          font-size: 30rpx;
        }
      }
    }
    .btn {
      margin: 0 auto;
      width: 622rpx;
      height: 88rpx;
      line-height: 88rpx;
      border-radius: 44rpx;
      background: #FFAD0D;
      color: #fff;
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      letter-spacing: 2rpx;
      margin-top: 64rpx;
    }
    .notClick {
      background: #FFD63D;
    }
  }
</style>
